
/* 颜色 */
$color-default: rgb(51, 51, 51); // 默认颜色

/* 主色 */
$color-main: rgb(23, 109, 190); // 主颜色
$color-main-light: rgba(23, 109, 190, 0.58); // 主颜色加深
$color-main-light2: rgba(23, 109, 190, 0.38); // 主颜色加深
$color-main-bold: rgb(23, 87, 159); // 主颜色加深

/* 自定义颜色 */
// 白色
$color-white: rgb(255, 255, 255); // 白色
$color-white-light: rgba(255, 255, 255, .8); // 白色 浅
$color-white-bold: rgb(220, 220, 220); // 白色 深
// 灰色
$color-gray: rgb(153, 153, 153); // 灰色
$color-gray-light: rgb(204, 204, 204); // 灰色 浅
$color-gray-bold: rgb(102, 102, 102); // 灰色 深
// 黑色
$color-black: rgb(0, 0, 0); // 黑色
$color-black-light: rgba(0, 0, 0, .8); // 黑色 浅
// 红色
$color-red: rgb(255, 0, 0); // 红色
$color-red-light: rgba(255, 0, 0, .8); // 红色 浅
$color-red-bold: rgb(187, 0, 0); // 红色 深
// 橙色
$color-orange: rgb(250, 80, 5); // 橙色
$color-orange-light: rgba(250, 80, 5, .8); // 橙色 浅
$color-orange-bold: rgb(210, 70, 3); // 橙色 深
// 蓝色
$color-blue: rgb(0, 92, 161); // 蓝色
$color-blue-light: rgb(1, 104, 198); // 蓝色 浅
$color-blue-light2: rgb(0, 166, 198); // 蓝色 浅
$color-blue-bold: rgb(0, 72, 140); // 蓝色 深
// 绿色 & 成功
$color-green: rgb(92, 184, 92);
$color-green-light: rgb(94, 205, 94);
$color-green-bold: rgb(68, 157, 68);

/* 背景色 */
//$backgroud-color-defalut: hsl(0, 0%, 95%); // 默认背景颜色
//$backgroud-color-defalut-light: hsl(0, 0%, 95%); // 默认背景颜色
//$backgroud-color-defalut-bold: hsl(0, 0%, 85%); // 默认背景颜色

/* 默认字体 */
// $font-family-default: "Hiragino Sans GB", "Microsoft YaHei", Helvetica, Arial, Tahoma, sans-serif; // 默认文本字体
$font-family-default: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; // 默认文本字体
$font-size-default: 14px; // 默认文本大小

/* 超链颜色 */
$link-color: $color-default;
$link-hover: $color-main;
/* 文本 */
// 文本超出隐藏并以省略号显示
@mixin text-hide($space: nowrap) {
    position: relative;
    display: block;
    white-space: $space;
    text-overflow: ellipsis;
    overflow: hidden;
}

/* 描边 */
$border-1px: 1px solid;
$border-2px: 2px solid;

/* 尺寸 */
$width-default: 1200px;
$width-container: 1100px;
/* 路径 */
$image-path: '../images/';


/* ----- 宽&高 方法 ----- */
@mixin w-h($width: 60px, $height: 60px) {
    width: $width;
    height: $height;
}

/* ----- 背景方法 ----- */
// 背景
@mixin bg-color($color: #fff) {
    background-color: $color;
}

// 背景：白色
@mixin bg-color-white($color: default) {
    @if $color == light {
        background-color: $color-white-light;
    } @else if $color == bold {
        background-color: $color-white-bold;
    } @else {
        background-color: $color-white;
    }
}

// 背景：灰色
@mixin bg-color-gray($color: default) {
    @if $color == light {
        background-color: $color-gray-light;
    } @else if $color == bold {
        background-color: $color-gray-bold;
    } @else {
        background-color: $color-gray;
    }
}

// 边界线
@mixin border-gray($color: defalut, $px: 1px, $type: solid) {
    @if $color == light {
        border: $color-gray-light $px $type;
    } @else if $color == bold {
        border: $color-gray-bold $px $type;
    } @else {
        border: $color-gray $px $type;
    }
}

// 背景：红色
@mixin bg-color-red($color:default) {
    @if $color == light {
        background-color: $color-main-light;
    } @else if $color == bold {
        background-color: $color-main-bold;
    } @else {
        background-color: $color-main;
    }
}
@mixin border-red($color: defalut, $px: 1px, $type: solid) {
    @if $color == light {
        border: $color-main-light $px $type;
    } @else if $color == bold {
        border: $color-main-bold $px $type;
    } @else {
        border: $color-main $px $type;
    }
}
/* ----- 背景 方法 end ----- */

/* ----- box-sizing ----- */
@mixin box-sizing($boxmodel) {
    -webkit-box-sizing: $boxmodel;
       -moz-box-sizing: $boxmodel;
            box-sizing: $boxmodel;
}
/* ----- 动画 方法 ----- */
@mixin an-ease-in($mm: .15s) {
    transition: #{$mm} ease-in;
}
@mixin an-ease-out($mm: .15s) {
    transition: #{$mm} ease-out;
}
@mixin an-ease-in-out($mm: .15s) {
    transition: #{$mm} ease-in-out;
}

@mixin an-bg($mm: .15s) {
    transition: background-color #{$mm} ease-in-out;
}
@mixin an-border($mm: .15s) {
    transition: border #{$mm} ease-in-out;
}
@mixin an-box($mm: .15s) {
    transition: box-shadow #{$mm} ease-in-out;
}
@mixin an-color($mm: .15s) {
    transition: color #{$mm} ease-in-out;
}


// clearfix 清除浮动
@mixin clearfix()
{
    *zoom: 1;
    &:before,
    &:after {
        display: block;
        content: "";
        height:0;clear:both;
        line-height: 0;
    }
    &:after {
        clear: both;
        //visibility:hidden
    }
}